/*
 * @Author: szx
 * @Date: 2022-04-29 16:57:36
 * @LastEditTime: 2022-04-29 18:54:15
 * @Description:
 * @FilePath: \learn\React学习\todo-list\src\components\Header\index.jsx
 */

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { nanoid } from 'nanoid';
import './index.css';

export default class index extends Component {
    static propTypes = {
        addTodo: PropTypes.func.isRequired
    };
    handleKeyUp = (e) => {
        const { key, target } = e;
        const { addTodo } = this.props;
        if (key !== 'Enter') return;
        if (target.value.trim() === '') return;
        const todoObj = {
            id: nanoid(),
            name: target.value,
            done: false
        };
        addTodo(todoObj);
        target.value = '';
    };
    render() {
        return (
            <div className="todo-header">
                <input onKeyUp={this.handleKeyUp} type="text" placeholder="请输入你的任务名称，按回车键确认" />
            </div>
        );
    }
}
